<template>
	<view class="">
		<!--  计次卡-->
		<view class="" v-if="data.type == 1">
			<view class="card-pack-item pr" :class="{ lapse }"
				:style="{ backgroundImage: `url(${assetsPath}${lapse ? '79e7069c1ffab0c61f08225fcc75f1c1d21507bf' : 'ed61d62e16e492b06ac88ca4452fbff1a6476eb3'}.png)` }">
				<view class="flex-align">
					<!-- 卡状态 1：未开卡； 2：正常 ；3：挂失；4：退卡；5：作废；6：禁用 -->
					<!-- <u-image :src="data.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx"
						height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ data.venue_name }}</view>
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 2">正常</view> -->
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 3">挂失</view> -->
					<!-- <u-tag text="被分享卡" :bgColor="lapse ? '#dcdcdc' : '#fff'" :color="lapse ? '#fff' : 'rgb(47,117,250)'" borderColor="rgba(0,0,0,0)" size="mini"></u-tag> -->
				</view>
				<navigator :url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
					v-if="!lapse" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
					<view class="qrcode">
						<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
							height="52rpx"></u-image>
					</view>
				</navigator>

				<view @click="$emit('click')">
					<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
						<view class="name">{{ data.goods_name }}</view>
						<view class="number">no.<text>{{ data.cardno }}</text></view>
					</view> -->
					<view class="flex-align">
						<view
							style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: rgb(47,117,250) ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
							v-if="data.cardstate == 1"><text>未开卡</text> </view>
						<view
							style=" width: 100rpx; height: 40rpx;background-color: #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
							v-if="data.cardstate == 6"><text>封卡</text>
						</view>
						<view class="name" style="margin-left: 13rpx;">{{ data.goods_name }}</view>	<text v-if="data.alias_name!=''">({{data.alias_name}})</text>
					</view>
					<view class="flex-between" style="margin: 30rpx 0 60rpx 0rpx;">
						<view class="name">no.<text>{{ data.cardno }}</text>
						 <text style="padding:3rpx 15rpx;margin-left: 13rpx;background-color: aliceblue;border-radius:10rpx;color: rgb(47,117,250) ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if='data.order_type == 29'>转移</text>
					</view>
						<!-- <view class="number">no.<text>{{ data.cardno }}</text></view> -->
					</view>
					<view class="flex-between bottom">
						<view>
							剩余：{{ data.else_text }}
							<!-- <text class="balance">{{ data.else_text }}</text> -->
						</view>
						<view class="date" v-if="data.cardstate == 1 && data.type == 1">暂未开卡</view>
						<view class="date" v-else>{{ data.yxq }}</view>
					</view>
				</view>
			</view>
		</view>
		<!--  时间卡-->
		<view class="" v-if="data.type == 2">
			<view class="card-pack-item pr" :class="{ lapse }"
				:style="{ backgroundImage: `url(${assetsPath}${lapse ? '79e7069c1ffab0c61f08225fcc75f1c1d21507bf' : 'ea6262ac4b063915dac6d250cb8828e8e4070db9'}.png)` }">
				<view class="flex-align">
					<!-- <u-image :src="data.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx"
						height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ data.venue_name }}</view>
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 2">正常</view> -->
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 3">挂失</view> -->
					<!-- <u-tag text="被分享卡" :bgColor="lapse ? '#dcdcdc' : '#fff'" :color="lapse ? '#fff' : 'rgb(47,117,250)'" borderColor="rgba(0,0,0,0)" size="mini"></u-tag> -->
				</view>
				<!-- <view v-if="data.cardstate == 2"> -->
				<view>
					<navigator :url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
						v-if="!lapse" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						<view class="qrcode">
							<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</navigator>

					<view @click="$emit('click')">
						<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view style="margin-left: 13rpx; width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #f08a22 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="data.cardstate == 1"><text>未开卡</text> </view>
							<view class="name">{{ data.goods_name }}</view>
						</view> -->
						<view class="flex-align">
							<view
								style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #f08a22 ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
								v-if="data.cardstate == 1"><text>未开卡</text> </view>
							<view
								style=" width: 100rpx; height: 40rpx;background-color: #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
								v-if="data.cardstate == 6"><text>封卡</text>
							</view>
							<view class="name" style="margin-left: 13rpx;">{{ data.goods_name }}</view><text v-if="data.alias_name!=''">({{data.alias_name}})</text>
						</view>
						<view class="flex-between" style="margin: 30rpx 0 60rpx 0rpx;">
							<view class="name">no.<text>{{ data.cardno }}</text></view>
							<!-- <view class="number">no.<text>{{ data.cardno }}</text></view> -->
						</view>
						<view class="flex-between bottom">
							<view>
								<!-- 剩余：{{ data.else_text }} -->
								<!-- <text class="balance">{{ data.else_text }}</text> -->
							</view>
							<view class="date" v-if="data.cardstate == 1 && data.type == 2">暂未开卡</view>
							<view class="date" v-else>{{ data.yxq }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 充值卡 -->
		<!-- 79e7069c1ffab0c61f08225fcc75f1c1d21507bf 白板-->
		<!-- 57960e1d48f88494a7188ca35b15b7a419b2dd00 已核销-->
		<view class="" v-if="data.type == 3">
			<view class="card-pack-item pr" :class="{ lapse }"
				:style="{ backgroundImage: `url(${assetsPath}${lapse ? '79e7069c1ffab0c61f08225fcc75f1c1d21507bf' : '0b7a19d1722fb9ffebd5e4e8cfd13e429d28d3f0'}.png)` }">
				<view class="flex-align">
					<!-- <u-image :src="data.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx"
						height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ data.venue_name }}</view>
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 2">正常</view> -->
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 3">挂失</view> -->
					<!-- <u-tag text="被分享卡" :bgColor="lapse ? '#dcdcdc' : '#fff'" :color="lapse ? '#fff' : 'rgb(47,117,250)'" borderColor="rgba(0,0,0,0)" size="mini"></u-tag> -->
				</view>
				<view>
					<navigator :url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
						v-if="!lapse" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						<view class="qrcode">
							<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</navigator>
					<view @click="$emit('click')">
						<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view style="margin-left: 13rpx; width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #97b717 ;font-size: 26rpx;text-align: center;line-height: 40rpx;"  v-if="data.cardstate == 1"><text>未开卡</text> </view>
							<view class="name" style="margin-right: 200rpx;">{{ data.goods_name }}</view>
						</view> -->
						<view class="flex-align">
							<view
								style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #97b717 ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
								v-if="data.cardstate == 1"><text>未开卡</text>
								
							<text style="padding:3rpx 15rpx;margin-left: 13rpx;background-color: aliceblue;border-radius:10rpx;color: #97b717 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if='data.order_type == 29'>转移</text>
							</view>
							<view
								style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
								v-if="data.cardstate == 6"><text>封卡</text>
							</view>
							<view class="name" style="margin-left: 13rpx;">{{ data.goods_name }}</view><text v-if="data.alias_name!=''">({{data.alias_name}})</text>
						</view>
						<view class="flex-between" style="margin: 30rpx 0 60rpx 0rpx;">
							<view class="name">no.<text>{{ data.cardno }}</text></view>
							<!-- <view class="number">no.<text>{{ data.cardno }}</text></view> -->
						</view>
						<view class="flex-between bottom">
							<view>
								剩余：{{ data.else_text }}
								<!-- <text class="balance">{{ data.else_text }}</text> -->
							</view>
							<view class="date" v-if="data.cardstate >1">{{ data.yxq }}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 私教卡 -->
		<view class="" v-if="data.type == 4">
			<view class="card-pack-item pr" :class="{ lapse }"
				:style="{ backgroundImage: `url(${assetsPath}${lapse ? '79e7069c1ffab0c61f08225fcc75f1c1d21507bf' : '4f62ca00f6a00930fa0a95649d83698ebec9d0f0'}.png)` }">
				<view class="flex-align">
					<!-- 卡状态 1：未开卡； 2：正常 ；3：挂失；4：退卡；5：作废；6：禁用 -->
					<!-- <u-image :src="data.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx"
						height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ data.venue_name }}</view>
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 2">正常</view> -->
					<!-- <view style="margin-left: 23rpx;" v-if="data.cardstate == 3">挂失</view> -->
					<!-- <u-tag text="被分享卡" :bgColor="lapse ? '#dcdcdc' : '#fff'" :color="lapse ? '#fff' : 'rgb(47,117,250)'" borderColor="rgba(0,0,0,0)" size="mini"></u-tag> -->
				</view>
				<!-- cardstate 2 开卡-->
				<navigator :url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
					v-if="!lapse" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
					<view class="qrcode">
						<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
							height="52rpx"></u-image>
					</view>
				</navigator>

				<view @click="$emit('click')">
					<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
						<view class="name">{{ data.goods_name }}</view>
						<view class="number">no.<text>{{ data.cardno }}</text></view>
					</view> -->
					<view class="flex-align">
						<view
							style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: rgb(211,183,113) ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
							v-if="data.cardstate == 1"><text>未开卡</text> </view>
						<view
							style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
							v-if="data.cardstate == 6"><text>封卡</text>
						</view>
						<view class="name" style="margin-left: 13rpx;">{{ data.goods_name }}</view><text v-if="data.alias_name!=''">({{data.alias_name}})</text>
					</view>
					<view class="flex-between" style="margin: 30rpx 0 60rpx 0rpx;">
						<view class="name">no.<text>{{ data.cardno }}</text></view>
						<!-- <view class="number">no.<text>{{ data.cardno }}</text></view> -->
					</view>
					<view class="flex-between bottom">
						<view>
							剩余：{{ data.else_text }}
							<!-- <text class="balance">{{ data.else_text }}</text> -->
						</view>
						<view class="date" v-if="data.cardstate == 1 && data.type == 1">暂未开卡</view>
						<view class="date" v-else>{{ data.yxq }}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				required: true
			},
			lapse: Boolean
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
			}
		},
	}
</script>

<style lang="scss" scoped>
	card-pack-item {
		.card-pack-item {
			margin-top: 30rpx;
		}
	}

	.card-pack-item {
		color: #fff;
		padding: 30rpx 30rpx 12rpx;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		&+.card-pack-item {
			margin-top: 30rpx;
		}

		&.lapse {

			.bottom,
			.balance {
				color: rgb(153, 153, 153) !important;
			}
		}

		.number {
			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.name {
			font-size: 36rpx;
		}

		.bottom {
			color: rgb(102, 102, 102);
			font-size: 28rpx;
			padding-top: -20rpx !important;

			.balance {
				font-size: 48rpx;
				color: #333;
				margin-right: 10rpx;
				font-weight: bold;
			}
		}

		.qrcode {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}
	}
</style>